<template>
	<view style="">
		<image src="/static/xgbj.png" class="qjimg" mode=""></image>
		<view class="title">
			<image @click="fanhui" src="/static/zfh.png" :style="'margin-top:'+top+'px;'" mode=""></image>
			<view class="toptit" :style="'margin-top:'+top+'px;'">
				巡更记录
			</view>
			<view class="" style="opacity: 0;">12</view>
		</view>
		<view class="xgzl" @click="datetimex">
			<image src="/static/riqi.png" mode=""></image>
			日期
		</view>
		<view class="" style="width: 100rpx; height: 100rpx;">

		</view>
		<view class="box" style="margin-top: 40rpx;" v-for="(item,index) in list" :key="index">
			<view class="box_1">
				<view class="box_1-1">
					<image src="../../static/aqxf.png" mode=""></image>
					{{item.title}}
				</view>
				<view class="box_1-2">
					{{item.num==0?'未巡更':'已巡更'+item.num+'次'}}
				</view>
			</view>
			<view class="box_2">
				<view class="box_2-1">
					<view class="box_2-1text1">
						巡检类型：<text>{{item.type}}</text>
					</view>
					<view class="box_2-1text1" style="margin: 40rpx 0;">
						巡检时间：<text>{{item.xtime}}</text>
					</view>
					<view class="box_2-1text1">
						巡检人：<text style="opacity: 0;">是</text> <text> {{item.man}}</text>
					</view>
				</view>
			</view>
			<view class="box_3">
				<view class="box_3-2" @click="goxunhang(item.id)">
					查看详情
				</view>
			</view>
		</view>

		<uni-datetime-picker style="opacity: 0;" ref="picker" :end="endDate" v-model="range" type="daterange"
			@change="maskClick">
			<div></div>
		</uni-datetime-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				xungestate: 1,
				nextp: 1,
				range: [],
				list: [],
				endDate: '',
				datetime: ''
			}
		},
		watch: {
			range(newval) {
				console.log('范围选:', this.range);
				this.datetime = this.range[0] + ' ' + this.range[1]
				console.log(this.timedate);
				this.nextp = 1
				this.getlist()
			},
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 6
			this.getDate()
		},
		onShow() {
			this.getlist()
		},

		methods: {
			datetimex() {
				this.$refs.picker.show()
			},
			maskClick(e) {
				console.log('mask', e);

			},
			goxunhang(id) {
				uni.navigateTo({
					url: '/pages/xungeng/goxungeng?id=' + id
				})
			},
			getlist() {
				if (this.nextp) {
					this.$post('wuyecenter/xungeng', {
						p: this.nextp,
						status: 1,
						datetime: this.datetime
					}, res => {
						this.nums = res.data.nums
						if (this.nextp == 1) {
							this.list = res.data.list
						} else {
							res.data.list.forEach(item => {
								this.list.push(item)
							})
						}

					})
				}
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			info() {
				uni.navigateTo({
					url: '/pages/xungeng/xungenginfo'
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					// year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				this.endDate = `${year}-${month}-${day}`;
				console.log(this.endDate, 'shijian');
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(250, 250, 250);
	}

	.qjimg {
		width: 750rpx;
		height: 603rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 20rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}
	}

	.toptit {
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
	}

	.xgzl {
		width: 161rpx;
		height: 60rpx;
		position: absolute;
		right: -20rpx;
		margin-top: 40rpx;
		background-color: #d5e5ff;
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		text-align: center;
		color: #2E79FC;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		>image {
			margin-right: 10rpx;
			width: 30rpx;
			height: 28rpx;
		}
	}

	.xungeng {
		margin-top: 130rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.xungeng2 {
		width: 220rpx;
		height: 140rpx;
		background-color: #DE6D00;
		border-radius: 5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.xungeng2-1 {
		font-size: 55rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #ffffff;
		line-height: 60rpx;
	}

	.xungeng2-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #ffffff;
		line-height: 40rpx;
	}

	.xungeng1 {
		width: 220rpx;
		height: 140rpx;
		background-color: #ffffff;
		border-radius: 5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.xungeng1-1 {
		font-size: 55rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #DE6D00;
		line-height: 60rpx;
	}

	.xungeng1-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #DE6D00;
		line-height: 40rpx;
	}

	.box {
		background-color: #ffffff;
		width: 94vw;
		margin: 0 auto;
		border-radius: 20rpx;
	}

	.box_1 {
		width: 94%;
		margin: 0 auto;
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box_1-1 {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;

		>image {
			width: 34rpx;
			height: 38rpx;
			margin-right: 25rpx;
		}

		display: flex;
		align-items: canvas;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}

	.box_1-2 {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #2D75FC;
		line-height: 20rpx;
	}

	.box_2 {
		background-color: #eaf2ff;
		width: 94%;
		margin: 0 auto;
	}

	.box_2-1 {
		padding: 30rpx;
	}

	.box_2-1text1 {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		line-height: 20rpx;

		>text {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			// line-height: 20rpx;
		}
	}

	.box_3 {
		width: 94%;
		margin: 0 auto;
		padding: 30rpx 0;
		display: flex;
		flex-direction: row-reverse;
	}

	.box_3-1 {
		width: 149rpx;
		height: 47rpx;
		// background-color: #2E79FC;
		border: 2rpx solid #999999;
		border-radius: 6rpx;
		font-size: 24rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 47rpx;
	}

	.box_3-2 {
		width: 149rpx;
		height: 47rpx;
		// background-color: #2E79FC;
		border: 2rpx solid #2E79FC;
		border-radius: 6rpx;
		font-size: 24rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #2E79FC;
		line-height: 47rpx;
	}
</style>
